@ts-nocheck
<template>
  <div class="atis-wrapper">
    <div v-if="atisList.length == 0" class="tips">
      <el-icon class="is-loading"><Loading /></el-icon>
      <span>通播获取中</span>
    </div>
    <div v-if="showContent && atisList.length > 0">
      <atisCodeCard v-for="item in atisList" :atis="item" />
      <!-- <draggable :list="atisList" animation="300" item-key="id">
        <template #item="{ element }">
          <atisCodeCard :atis="element" />
        </template>
      </draggable> -->
    </div>
    <!-- <p class="tips" v-if="atisList.length > 0">点击可以查看详情<br />拖动可以调整顺序</p> -->
  </div>
</template>

<script>
import draggable from "vuedraggable";
import atisCodeCard from "./atisCodeCard.vue";
import { h } from "vue";
import dayjs from "dayjs";
import { mapWritableState } from "pinia";
import seatStore from "@/store/seat";
export default {
  name: "ATISView",
  components: {
    draggable,
    atisCodeCard,
  },
  data() {
    return {
      atisList: [],
      sequenceList: [],
      showContent: true,
      timer: null,
      drag: false,
    };
  },

  computed: {
    ...mapWritableState(seatStore, ["atis"]),
    // ...mapState(commonStore, ["isWideEnough"]),
  },

  methods: {
    loadData() {
      // this.axios.get("api/seat_atis_refresh.php");
      this.axios
        .get("api/seat_atis_refresh.php")
        .then((response) => {
          let atisListNew = response.data.content;
          this.atis = response.data.content;
          if (!atisListNew) {
            "Loading ATIS Failed", response.data;
          } else if (this.atisList.length != atisListNew.length) {
            this.atisList = atisListNew;
          } else {
            let messages = new Array();
            for (let i = 0; i < this.atisList.length; i++) {
              for (let j = 0; j < atisListNew.length; j++) {
                if (
                  this.atisList[i].airportCode == atisListNew[j].airportCode
                ) {
                  if (
                    this.atisList[i].arrivalCode !=
                      atisListNew[j].arrivalCode ||
                    this.atisList[i].fullContent != atisListNew[j].fullContent
                  ) {
                    messages.push(
                      h(
                        "div",
                        null,
                        `${this.atisList[i].airportCode}进港通播由${this.atisList[i].arrivalCode}更新为${atisListNew[j].arrivalCode}`
                      )
                    );

                    this.atisList[i] = atisListNew[j];
                  }
                }
              }
            }
            if (messages.length > 0) {
              messages.push(
                h(
                  "div",
                  {
                    style: {
                      paddingTop: "4px",
                      fontSize: "12px",
                      opacity: "0.5",
                    },
                  },
                  "@" + dayjs().format("HH:mm:ss")
                )
              );
              this.$notify.success({
                title: "收到新的通播代码",
                message: h("div", null, messages),
                duration: 60 * 1000,
                position: "bottom-right",
              });
            }
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
  mounted() {
    this.loadData();
    this.timer = setInterval(() => {
      this.loadData();
    }, 3000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.atis-wrapper {
  width: 100%;
  /* background-color: #888; */
  text-align: center;
}

.tips {
  font-size: 12px;
  color: var(--el-color-info);
  min-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex-direction: column; */
  margin-bottom: 16px;
}
</style>
